<div class="account-pages my-5 pt-sm-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6 col-xl-5">
        <div class="card overflow-hidden">
          <div class="bg-soft-primary">
            <div class="row">
              <div class="col-7">
                <div class="text-primary p-4">
                  <h5 class="text-primary">Register here</h5>
                  <p>Get your SKF account now.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body pt-0">
            <div>
              <a href="javascript: void(0)">
                <div class="avatar-md profile-user-wid mb-4">
                  <span class="avatar-title rounded-circle bg-light">
                    <img src="assets/images/logo.svg" alt="SKF Logo" class="rounded-circle" height="65">
                  </span>
                </div>
              </a>
            </div>
            <div class="p-2">
              <form class="form-horizontal" [formGroup]="registerationForm" (ngSubmit)="onSubmit()">
                <ngb-alert type="success" *ngIf="successmsg" [dismissible]="false">Registeration successful.</ngb-alert>
                <ngb-alert type="danger" *ngIf="errormsg" [dismissible]="false">Registeration Failed.</ngb-alert>
                <div class="form-group mb-3">
                  <label for="user_id">User ID</label>
                  <input type="text" formControlName="user_id" class="form-control" id="user_id"
                    [ngClass]="{'is-invalid': !user_id.valid && (user_id.touched || userSubmitted)}"
                    placeholder="Enter User ID" />
                  <div *ngIf="!user_id.valid && (user_id.touched || userSubmitted)" class="invalid-feedback">
                    <div *ngIf="user_id.hasError('required')">User Id is required</div>
                  </div>
                </div>
                <div class="form-group mb-3">
                  <label for="accessToken">Access Token</label>
                  <input type="text" formControlName="accessToken" class="form-control" id="accessToken"
                    [ngClass]="{'is-invalid': !accessToken.valid && (accessToken.touched || userSubmitted)}"
                    placeholder="Enter Access Token" />
                  <div *ngIf="!accessToken.valid && (accessToken.touched || userSubmitted)" class="invalid-feedback">
                    <div *ngIf="accessToken.hasError('required')">Access Token is required</div>
                  </div>
                </div>
                <div class="form-group mb-3">
                  <label for="username">Username</label>
                  <input type="text" formControlName="username" class="form-control" id="username"
                    [ngClass]="{'is-invalid': !username.valid && (username.touched || userSubmitted)}"
                    placeholder="Enter username" />
                  <div *ngIf="!username.valid && (username.touched || userSubmitted)" class="invalid-feedback">
                    <div *ngIf="username.hasError('required')">Username is required</div>
                  </div>
                </div>
                <div class="form-group mb-3">
                  <label for="email">Email</label>
                  <input type="email" formControlName="email" class="form-control" id="email"
                    [ngClass]="{'is-invalid': !email.valid && (email.touched || userSubmitted)}"
                    placeholder="Email" />
                  <div *ngIf="!email.valid && (email.touched || userSubmitted)" class="invalid-feedback">
                    <div *ngIf="email.hasError('required')">Email is required</div>
                    <div *ngIf="email.hasError('email')">Email must be a valid email address</div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="password">Password</label>
                  <input type="password" formControlName="password" class="form-control" id="password"
                    [ngClass]="{'is-invalid': !password.valid && (password.touched || userSubmitted)}"
                    placeholder="Password" />
                  <div *ngIf="!password.valid && (password.touched || userSubmitted)" class="invalid-feedback">
                    <div *ngIf="password.errors['required']">Password is required</div>
                    <div *ngIf="password.errors.minlength">Password should not be lesser than 8 character</div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="repassword">Confirm Password</label>
                  <input type="password" formControlName="repassword" class="form-control" id="repassword"
                    [ngClass]="{'is-invalid': !repassword.valid && (repassword.touched || userSubmitted)}"
                    placeholder="Confirm Password" />
                  <div *ngIf="!repassword.valid && (repassword.touched || userSubmitted)"
                    class="invalid-feedback">
                    <div *ngIf="repassword.hasError('required')">Confirm the Password</div>
                    <div *ngIf="registerationForm.hasError('notmatched') && repassword.valid">Password not matching</div>
                  </div>
                </div>
                <div class="mt-4">
                  <a><button class="btn btn-primary btn-block" type="submit">Register</button></a>
                </div>
              </form>
            </div>
          </div>
        </div>
        <!-- end card -->
        <div class="mt-5 text-center">
          <p>Already have an account ? <a routerLink="/auth/login" class="font-weight-medium text-primary"> Login</a>
          </p>
          <p>© {{year}} <b>Security Knowledge Framework</b>.</p>
        </div>
      </div> <!-- end col -->
    </div>
    <!-- end row -->
  </div>
  <!-- end container -->
</div>
<!-- end page -->